<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>生产主体</title>
	<!-- <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> -->
	<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">	
    <link rel="stylesheet" href="./css/htmleaf-demo.css">
	<link rel="stylesheet" href="./css/nav.css">
	<link rel="stylesheet" href="./css/myplan.css">
    <link rel="stylesheet" href="./css/production.css">
	<script src="./js/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mockjs@1.1.0/dist/mock.min.js"></script>
	<script src="./js/global-axios.js"></script>
    <script src="./js/qs.js"></script>
</head>

<body>

	<div class="plan-content">
		<div class="panel-group" id="accordion">
			<div class="panel">
				<div class="panel-heading">
					<h4 class="panel-title biao"><a href="#">计划任务管理</a> </h4>
				</div>
			</div>
			<div class="panel">
				<div class="panel-heading">
					<h4 class="panel-title biao"><a href="#">数据中心</a> </h4>
				</div>
			</div>
		</div>
		<div class="yuyecontent">
			<div class="plan-control">
				<div class="plan-control-top">
					<ul>
						<li><a href="">渔业资源管理系统</a></li>
						<li>/</li>
						<li><a href="">生产主体库</a></li>
						<li>/</li>
						<li><a href="">生产主体库</a></li>
						<li> </li>
					</ul>
				</div>
                <hr>
				<form action="" id="plan">
					<label for="renwu" class="label-control sureName">任务名称
						<input type="text" class="form-control" id="renwu"><span>0/8</span>
					</label>
                    <label for="renwu" class="label-control ">任务名称
						<select class="form-control selectpicker" id="">
							<option value="" hidden selected disabled>请选择任务1</option>
							<option value="">请选择任务</option>
							<option value="">请选择任务</option>
						</select>
					</label>
                    <label for="renwu" class="label-control sureName">任务名称
						<select class="form-control selectpicker" id="">
							<option value="" hidden selected disabled>请选择任务1</option>
							<option value="">请选择任务</option>
							<option value="">请选择任务</option>
						</select>
					</label>
                    <label for="renwu" class="label-control sureName">任务名称
						<select class="form-control selectpicker" id="">
							<option value="" hidden selected disabled>请选择任务1</option>
							<option value="">请选择任务</option>
							<option value="">请选择任务</option>
						</select>
					</label>
                    <label for="renwu" class="label-control sureName2">任务名称
						<input type="text" class="form-control" id="renwu"><span>0/130</span>
					</label>
					<label for="renwu" class="label-control sureName3">任务名称
						<input type="text" class="form-control" id="renwu"><span>0/30</span>
					</label>
                    <label for="renwu" class="label-control sureName4">任务名称
						<input type="text" class="form-control" id="renwu"><span>0/11</span>
					</label>
                    <label for="renwu" class="label-control sureName5">任务名称
						<input type="text" class="form-control" id="renwu"><span>0/18</span>
					</label>
                    <label for="renwu" class="label-control choiceName">任务名称
						<input type="radio" class="" id="renwu">种植业
						<input type="radio" class="" id="renwu">渔业
					</label>
					<button type="submit" class="btn btn-primary">查询</button>
					<button type="reset" class="btn">重置</button>
				</form>
				<form action=""  id="data">
					<label for="renwu" class="label-control sureName6">任务名称
						<input type="text" class="form-control" id="renwu"><span>0/8</span>
					</label>
                    <label for="renwu" class="label-control sureName7">任务名称
						<input type="text" class="form-control" id="renwu"><span>0/30</span>
					</label>
                    <label for="renwu" class="label-control sureName">任务名称
						<select class="form-control selectpicker" id="">
							<option value="" hidden selected disabled>请选择任务1</option>
							<option value="">请选择任务</option>
							<option value="">请选择任务</option>
						</select>
					</label>
                    <label for="renwu" class="label-control sureName">任务名称
						<select class="form-control selectpicker" id="">
							<option value="" hidden selected disabled>请选择任务1</option>
							<option value="">请选择任务</option>
							<option value="">请选择任务</option>
						</select>
					</label>
                    <label for="renwu" class="label-control sureName8">任务名称
						<input type="text" class="form-control" id="renwu"><span>0/30</span>
					</label>
					<label for="renwu" class="label-control">任务名称
						<select class="form-control selectpicker" id="">
							<option value="" hidden selected disabled>请选择任务1</option>
							<option value="">请选择任务</option>
							<option value="">请选择任务</option>
						</select>
					</label>
                    <label for="renwu" class="label-control sureName">任务名称
						<select class="form-control selectpicker" id="">
							<option value="" hidden selected disabled>请选择任务1</option>
							<option value="">请选择任务</option>
							<option value="">请选择任务</option>
						</select>
					</label>
                    <label for="renwu" class="label-control choiceName">行业
						<input type="radio" class="" id="renwu">种植业
						<input type="radio" class="" id="renwu">渔业
					</label>
					<button type="submit" class="btn btn-primary">查询</button>
					<button type="reset" class="btn">重置</button>
				</form>
				<div class="contentBd">
					<div class="zongbd">
						<div class="biaodan">
							<div class="htmleaf-container">
								<div class="showone">
									<div class="row">
										<div class="col-md-12">
											<div class="table-responsive">
												<table class="table table-bordered table-striped table-hover" id="mytable">
													<thead>
														<tr>
															<td>主体名称</td>
															<td>联系人</td>
															<td>电话</td>
															<td>主体类型</td>
															<td>主题组织机构代码</td>
															<td>基地</td>
															<td>主体地址</td>
															<td>联系人员</td>
															<td><button class="btn btn-primary">新增</button>
															<button class="btn btn-warning">导出</button>
															<button class="btn btn-danger">导入</button></td>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td><input type="checkbox"></td>
															<td>NHQ15302</td>
															<td>西樵镇数据采集08231141</td>
															<td>西樵镇-上进欧村-鱼塘-150</td>
															<td>西樵镇</td>
															<td>上进欧村</td>
															<td>3.3597</td>						
															<td class="text-primary"><div class="btn-group ">
																<button type="button" class="btn btn-sm btn-default amend">
																<span class="glyphicon glyphicon-pencil" > </span>
																</button>
																<button type="button" class="delet btn btn-sm btn-default">
																<span class="glyphicon glyphicon-trash" > </span>
																</button>
																<button type="button" class="sure btn btn-sm btn-default" style="display:none;">
																<span class="glyphicon glyphicon-ok" > </span>
																</button>
																<button type="button" class="back btn btn-sm btn-default" style="display:none;">
																<span class="glyphicon glyphicon-remove" > </span>
																</button>
																</div></td>
														</tr>
													</tbody>
												</table>
												<div class="page">
													<select class="form-control btn-info" style="width: 120px;margin-right: 15px;">
														<option value="6">显示6页</option>
														<option value="10">显示10页</option>
														<option value="20">显示20页</option>
													</select>
													<div class="nextPage btn btn-info">下一页</div>
													<div class="beforePage btn btn-info">上一页</div>
													<div class="lastPage btn btn-info">最后一页</div>
													<ul class=""></ul>
												</div>
											</div>
										</div>
										
									</div>
								</div>
							</div>
						</div>		
						<div class="biaodan">
							<div class="htmleaf-container">
								<div class="showtwo">
									<div class="row">
										<div class="col-md-12">
											<div class="table-responsive">
												<table class="table table-hover table-bordered table-striped" id="mytable2">
													<thead>
														<tr>
															<td>图斑ID</td>
															<td>地塘块命名</td>
															<td>镇街</td>
															<td>村居</td>
															<td>面积(亩)</td>
															<td>地块类型</td>
															<td>所属主体</td>
															<td>农产品分类</td>
															<td>品种</td>
															<td><button class="btn btn-primary">新增</button>
															<button class="btn btn-warning">导出</button>
															<button class="btn btn-danger">导入</button></td>
														</tr>
													</thead>
													<tbody>								
													</tbody>
												</table>
												<div class="page">
													<select class="form-control btn-info" style="width: 120px;margin-right: 15px;">
														<option value="6">显示6页</option>
														<option value="10">显示10页</option>
														<option value="20">显示20页</option>
													</select>
													<div class="nextPage btn btn-info">下一页</div>
													<div class="beforePage btn btn-info">上一页</div>
													<div class="lastPage btn btn-info">最后一页</div>
													<ul></ul>
												</div>
											</div>
										</div>
										
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog"></div>
    </div>
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="./bootstrap-3.4.1-dist/js/bootstrapValidator.min.js"></script>
    <script src="dist/js/vendor/dependencies.js"></script>
	<script type="text/javascript" src="./js/bootsnav.js"></script>
	<script src="./js/modal-box.js"></script>
	<script src="./js/production.js"></script>

	<script>
		function getLonger(item, index, num) {
			let items = document.querySelector(item)
			let indexs = document.querySelector(index)
			items.onkeyup = () => {
				let long = items.value.length
				indexs.innerHTML = ''
				indexs.innerHTML = long + '/' + num
				items.setAttribute('maxlength', num)
			}
			items.parentNode.style.cssText = 'position: relative'
			indexs.style.cssText = 'position: absolute; right: 8%; color: #ccc;'
		}
		getLonger('.sureName input', '.sureName span', 8)
		getLonger('.sureName2 input', '.sureName2 span', 130)
		getLonger('.sureName3 input', '.sureName3 span', 30)
		getLonger('.sureName4 input', '.sureName4 span', 11)
		getLonger('.sureName5 input', '.sureName5 span', 18)
		getLonger('.sureName6 input', '.sureName6 span', 8)
		getLonger('.sureName7 input', '.sureName7 span', 30)
		getLonger('.sureName8 input', '.sureName8 span', 30)
		prodtx('.looking')
	</script>
</body>

</html>